<template>
  <v-chart :options="scatterOption"  class="echarts"/>
<!--  <div id="main" class="echarts">-->
</template>

<style>
  .echarts {
    width: 100%;
    height: 100%;
  }
</style>

<script>
  // 导入绘图组件 需要安装 vue-echart echart
  import ECharts from 'vue-echarts'
  import 'echarts/lib/chart/line'
  import 'echarts/lib/component/tooltip'
  import 'echarts/lib/component/title'
  import 'echarts/lib/component/legend'
  import 'echarts/lib/component/grid'
  import 'echarts/lib/component/toolbox'
  import * as echarts from 'echarts';



  export default {
    name: "echartScatter",
    components: {
      'v-chart': ECharts
    },
    props: ['scatterData'],
    data() {
      return {
        scatterOption: null,
        // xChick:['1', '2', '3', '4', '5', '6', '7'],
        // // 真实值数据
        // dataX1:[120, 132, 101, 134, 90, 230, 210],
        // // 预测值数据
        // dataX2:[220, 182, 191, 234, 290, 330, 710]
        // xChick:null,
        // dataX1:null,
        // dataX2:null
      }
    },

    created() {
     // // this.drawScatterChart()
     // this.drawScatterChart()
    },

    methods: {
      // 接收参数绘制图形
      drawScatterChart(rawData){
        // 将接收到的数据分类
        let handleData = {}
        // console.log("@@@@@@@@@@!",rawData)
        // tabList = Array.from(this.scatterData);
        rawData.forEach(item => {
          if (!(item.label in handleData)) {
            handleData[item.label] = []
          }
          handleData[item.label].push({'col1': item.col1, 'col2': item.col2})
        });

        // echart 散点图配置信息
        let echartSeries =[]
        //处理结果为字典形式,不能用for length
        for(let key in handleData ){
          let item =  handleData[key]
          // 暂存处理的数据
          let axisData = []
          // 遍历每个label, 对数据进行处理
          for (let i = 0; i < item.length; i++) {
            let col1 = item[i].col1
            let col2 = item[i].col2
            var newArr = [col1, col2]
            axisData.push(newArr)
          };
          //  echart 散点图配置参数
          let nameString = key + "分类"
          let newOption = {
            name: nameString,
            type: 'scatter',
            data: axisData
          }
          echartSeries.push(newOption)
        };
        this.setChartOpention(echartSeries)
      },

      /**
       *  设置绘图参数 ,
       *  接收参数：params: echartSeries  [{name: 分类标签名称,type: 'scatter', data:数据集[[x,y],[x,y]]}
       *  返回完整的绘图配置信息
        */
      setChartOpention(echartSeries) {
        // 设置其它绘图配置信息
        let option = {
          title: {
            text: '散点图'
          },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'value',
            scale: true
          },
          yAxis: {
            type: 'value',
            scale: true
          },
          series: []
        }
        option.series = echartSeries
        this.scatterOption= option
      }

    }
  }
</script>
